<template>
	<div>
		<div :class="$style.header">
			<div :class="$style.backicon" @click="back">
				<i class="iconfont icon-fanhui" />
			</div>
			<span :class="$style.title">
				{{ tradetype === 'buy' ? '买入原因' : '卖出原因' }}
			</span>
		</div>

		<div :class="$style.reasons">
			<p :class="$style.hint">
				最多选三项
			</p>
			
			<div :class="$style.list">
				<ul>
					<li v-for="reason in reasonList" :class="getReasonClass(reason)" @click="chooseReason(reason)">
						<div :class="$style.content">
							<span :class="$style.reason_title">{{ reason.TITLE }}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div :class="$style.preview">
			<ul>
				<li v-if="selectedReasons[0]">
					<p :class="$style.icon"><i class="iconfont" v-html="Constant.REASON_ICON_CODE[selectedReasons[0].icon]"></i></p>
					<p :class="$style.onereason" style="color: #FF8C3F">{{ selectedReasons[0].text }}</p>
				</li>
				<li v-if="selectedReasons[1]">
					<p :class="$style.icon"><i class="iconfont" v-html="Constant.REASON_ICON_CODE[selectedReasons[1].icon]"></i></p>
					<p :class="$style.onereason" style="color: #46BAED">{{ selectedReasons[1].text }}</p>
				</li>
				<li v-if="selectedReasons[2]">
					<p :class="$style.icon"><i class="iconfont" v-html="Constant.REASON_ICON_CODE[selectedReasons[2].icon]"></i></p>
					<p :class="$style.onereason" style="color: #999999">{{ selectedReasons[2].text }}</p>
				</li>
			</ul>
		</div>

		<div :class="$style.footer" @click="confirmReason">
			<span :class="$style.btn">确认</span>
		</div>
	</div>
</template>

<script>
	import RemoteDAO from '../../../common/remoteDAO'
	import Pop from './pop'
	const Constant = require('../../../common/constant')
	
	export default {

		components: {
			Pop
		},

		mounted () {
			RemoteDAO.callUC12008312(resp => {
				if (resp.error == '0') {
					const decryptData = JSON.parse(decrypt.json2(resp.data))
					const list = decryptData.body || []
					const ct = this.tradetype === 'buy' ? 'B' : 'S'
					console.log(list)
					this.reasonList = list.filter(r => r.CONFIG_TYPE === ct)
				}
			})
		},

		data () {
			const { query } = this.$route
			const { tradetype = 'buy' } = query
			return {
				Constant: Constant,
				reasonList: [],
				tradetype
			}
		},

		computed: {
			selectedReasons () {
				if (this.tradetype === 'buy') {
					return this.$store.state.buyReasons.length === 0
						? Constant.BUY_DEFAULT_REASON : this.$store.state.buyReasons
				} else {
					return this.$store.state.sellReasons.length === 0
						? Constant.SELL_DEFAULT_REASON : this.$store.state.sellReasons
				}
			}

		},

		methods: {
			back () {
				this.$router.go(-1)
			},
			confirmReason () {
				this.$router.go(-1)
			},
			getReasonClass (reason) {
				const isSelected = this.selectedReasons.findIndex(r => r.icon == reason.ICON_URL) >= 0
				return isSelected ? this.$style.active : this.$style.deactive
			},
			chooseReason (reason) {
				const isBuy = this.tradetype === 'buy'
				const isSelected = this.selectedReasons.findIndex(r => r.icon == reason.ICON_URL) >= 0
				if (isSelected) {
					if (this.selectedReasons.length <= 1) {
						this.$store.dispatch('setTip', { text: '至少选择一个原因哦' })
					} else {
						const _index = this.selectedReasons.findIndex(r => r.icon == reason.ICON_URL)
						this.$store.dispatch(isBuy ? 'setBuyReasons' : 'setSellReasons',
							this.selectedReasons.slice(0, _index).concat(this.selectedReasons.slice(_index + 1)))
					}
				} else {
					if (this.selectedReasons.length >= 3) {
						this.$store.dispatch('setTip', { text: '最多只能选择3个原因哦' })
					} else {
						this.$store.dispatch(isBuy ? 'setBuyReasons' : 'setSellReasons', this.selectedReasons.concat({ icon: reason.ICON_URL, text: reason.TITLE }))
					}
				}
			}
		}
	}
</script>

<style module lang="less">
	.header {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		background-image: url('assets/images/beijing_3x.jpg');
		background-size: cover;
		background-position: 0 0;
		text-align: center;
	}

	.title {
		color: #fff;
		font-size: 17px;
		line-height: 44px;
	}

	.footer {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 15px;
		background-color: #F2F2F2;
		text-align: center;
	}

	.btn {
		background-color: #FDBB4A;
		padding: 5px;
		text-align: center;
		display: inline-block;
		width: 90%;
		color: #FFF;
		border-radius: 99px;
	}

	.preview {
		background-color: #FFF;

		ul, li {
			list-style: none;
		}

		p {
			margin: 0;
			text-align: center;
		}

		ul {
			display: -webkit-box;
			margin: 0;
			padding: 0;
		}

		li {
			-webkit-box-flex: 1;
			width: 33%;
			position: relative;

			&:not(:last-child)::after {
     			content: '';
     			position: absolute;
     			right: 0;
     			top: 10%;
     			bottom: -12%;
     			width: 1px;
     			background-color: #DDD;
     		}
		}

		i {
			font-size: 35px;
			color: #999;
		}

		padding-bottom: 80px;
	}

	.onereason {
		font-size: 12px;
	}

	.reasons {
		overflow: hidden;
		padding-bottom: 30px;
		background-image: url('assets/images/beijing_3x.jpg');
		background-repeat: no-repeat;
	    background-position: 0 -40px;
	    background-size: 100% 120%;

	    ul li {
	    	list-style: none;
	    }

	    ul {
	    	padding: 0;
	    }

	    .active {
	    	background-color: #FFF;
	    	background-image: url('assets/images/hook.png');
	    }

	    .deactive {
	    	background-color: #88DBFF;
	    	background-image: url('assets/images/plus.png');
	    }

	    li {
	    	float: left;
		    padding: 5px 10px;
		    border-radius: 30px;
		    margin-left: 10px;
		    margin-top: 10px;
		    color: #378DB4;
		    position: relative;
		    line-height: 16px;
		    background-repeat: no-repeat;
		    background-position: 10% 50%;
		    background-size: 20px;
	    }

	    .content {
	    	max-width: 72px;
	    	font-size: 12px;
	    }

	    .reason_title {
	    	display: inline-block;
	    	margin-left: 18px;
	    }

	    &::-webkit-scrollbar {
		    display: none;
		}
	}

	.hint {
		color: #FFF;
		margin-top: 10px;
		padding-left: 10px;
	}

	.backicon {
		position: absolute;
	    line-height: 32px;
	    font-size: 20px;
	    width: 36px;
	    height: 36px;
	    text-align: center;
	    border-radius: 50%;
	    border: 1px solid #A4E3FF;
	    margin-top: 4px;
	    margin-left: 8px;
	    background-color: #3D90CD;

		i {
			font-size: 22px;
    		line-height: 36px;
    		color: #C5DFF0;
		}
	}

</style>